<template>
  <div>
    <ElForm inline>
      <ElFormItem label="昵称">
        <ElInput v-model="searchForm.queryCondition.nickNameSml"></ElInput>
      </ElFormItem>
      <ElFormItem label="金币数量从">
        <ElInputNumber v-model="searchForm.queryCondition.goldCoinMin" />
      </ElFormItem>
      <ElFormItem label="至">
        <ElInputNumber v-model="searchForm.queryCondition.goldCoinMax" />
      </ElFormItem>
      <ElFormItem label="类型">
        <ElSelect v-model="searchForm.queryCondition.professions" multiple>
          <!-- <ElOption label="作家" value="writer"></ElOption>
          <ElOption label="会计" value="accountant"></ElOption>
          <ElOption label="巫师" value="wizard"></ElOption>
          <ElOption label="建筑师" value="architect"></ElOption> -->
          <template v-for="(e, i) in professionEnums" :key="i">
            <ElOption :label="e.label" :value="e.value"></ElOption>
          </template>
        </ElSelect>
      </ElFormItem>
      <ElFormItem>
        <ElButton>reset</ElButton>
        <ElButton type="primary" @click="dynamicQuery">Search</ElButton>
        <ElButton type="success" @click="open4insert">insert</ElButton>
      </ElFormItem>
    </ElForm>
    <!-- <div>{{ results }}</div> -->
    <ElTable :data="results">
      <ElTableColumn label="序号" prop="playerId"></ElTableColumn>
      <ElTableColumn label="编号" prop="playerCode"></ElTableColumn>
      <ElTableColumn label="名字" prop="nickname"></ElTableColumn>
      <ElTableColumn label="金币数量" prop="goldCoin"></ElTableColumn>
      <ElTableColumn label="银币数量" prop="silverCoin"></ElTableColumn>
      <ElTableColumn label="职业" prop="profession"></ElTableColumn>
      <ElTableColumn label="总硬币数量">
        <template #default="{ row }">
          <div class="cell-coin">{{ row.goldCoin + row.silverCoin }}</div>
        </template>
      </ElTableColumn>
      <ElTableColumn label="操作">
        <template #default="{ row }">
          <ElButton type="warning" @click="() => open4Modify(row)">修改</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination
      :total="total"
      :page-size="searchForm.pageSize"
      @current-change="pageSearch"
    ></ElPagination>
    <ElDialog v-model="insertVisible">
      <ElForm style="width: 260px" label-width="auto">
        <ElFormItem label="昵称">
          <ElInput v-model="player.nickname"></ElInput>
        </ElFormItem>
        <ElFormItem label="金币数量">
          <ElInputNumber v-model="player.goldCoin"></ElInputNumber>
        </ElFormItem>
        <ElFormItem label="银币数量">
          <ElInputNumber v-model="player.silverCoin"></ElInputNumber>
        </ElFormItem>
        <ElFormItem label="名称">
          <ElInput v-model="player.usernameFk"></ElInput>
        </ElFormItem>
        <ElFormItem label="职业">
          <ElSelect v-model="player.profession">
            <template v-for="(e, i) in professionEnums" :key="i">
              <ElOption :label="e.label" :value="e.value"></ElOption>
            </template>
          </ElSelect>
        </ElFormItem>
        <ElFormItem>
          <ElButton type="primary" @click="insert">提交</ElButton>
        </ElFormItem>
      </ElForm>
    </ElDialog>
    <ModifyPlayer ref="mp"></ModifyPlayer>
  </div>
</template>
<script lang="ts">
// import axios from 'axios'
import axios from '@/api/http'
import { ElFormItem, ElInput, ElInputNumber, ElMessage, ElSelect } from 'element-plus'
import ModifyPlayer from '@/components/ModifyPlayer.vue'
/**
 * 页面核心数据结构体说明文档
 *  {
      "playerId": 14,
      "playerCode": "8110776",
      "nickname": "苗田",
      "goldCoin": 97,
      "silverCoin": 100,
      "profession": "wizard",
      "usernameFk": "2016207114",
      "version": 0
    },
 *
 */
// import from

export default {
  name: 'QueryView',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      searchForm: {
        pageNum: 1,
        pageSize: 6,
        queryCondition: {
          nickNameSml: '',
          goldCoinMin: 0,
          goldCoinMax: 0,
          professions: []
        }
      },
      total: 83,
      results: [],
      professionEnums: [
        {
          label: '作家',
          value: 'writer'
        },
        {
          label: '会计',
          value: 'accountant'
        },
        {
          label: '巫师',
          value: 'wizard'
        },
        {
          label: '建筑师',
          value: 'architect'
        }
      ],
      insertVisible: false,
      player: {
        goldCoin: 10,
        silverCoin: 30,
        nickname: '张琪',
        usernameFk: 'zhagnqi001',
        profession: 'architect',
        version: 0,
        playerId: 0,
        playerCode: 'string'
      }
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.dynamicQuery()
  },
  methods: {
    // sampleM() {},
    async dynamicQuery() {
      const res = await axios({
        method: 'post',
        url: 'http://localhost:9090/ceto/player/query',
        data: this.searchForm
      })
      console.log(res)
      this.total = res.data.total
      this.results = res.data.results
    },
    async pageSearch(a: any) {
      this.searchForm.pageNum = a
      await this.dynamicQuery()
    },
    open4insert() {
      this.insertVisible = true
    },
    async insert() {
      const res = await axios({
        method: 'post',
        url: 'http://localhost:9090/ceto/player/insert',
        data: this.player
      })
      ElMessage.warning(JSON.stringify(res.data))
      this.insertVisible = false
      this.dynamicQuery()
    },
    open4Modify(row: any) {
      console.log(row)
      // 复制后赋值
      const playerModify = JSON.parse(JSON.stringify(row))
      // const mp =  document.getElementById('mp')
      const mp: any = this.$refs.mp
      mp.show(playerModify)
      // modifyVisible= true;
    }
  },
  watch: {
    // sampleP(n, o) {},
  },
  components: { ElInputNumber, ElInput, ElSelect, ElFormItem, ModifyPlayer }
}
</script>

<!--<style scoped>-->
<style lang="css" scoped>
.cell-coin {
  color: rebeccapurple;
  font-size: 20px;
  border: solid 1px purple;
  display: inline-block;
}
</style>
